<template>
	<view class="nav-bar">
		<u-navbar :fixed="true" :title="title" :safeAreaInsetTop="true" :placeholder="true" class="nav-bar-fixed"
		border>

			<view class="u-nav-slot" slot="right" v-if="!isMini">
				<u-icon name="search" size="20" @click="search"></u-icon>
				<u-line direction="column" :hairline="false" length="15" margin="0 6px"></u-line>
				<!-- <u-icon name="more" size="22" @click="home"></u-icon> -->
				<uni-icons type="more-filled" size="22" @click="home" color="#808080"></uni-icons>
			</view>
			<!-- <view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" size="20" @click="left"></u-icon>
					<u-line direction="column" :hairline="false" length="15" margin="0 6px"></u-line>
					<u-icon name="home" size="22" @click="home"></u-icon>
				</view> -->
			<u-icon name="arrow-left" size="20" @click="left" slot="left"></u-icon>


		</u-navbar>

		<u-popup :show="showable" @close="close" @open="open" round="10" closeable>
			<view class="nav-bar-panel">
				<view style="height: 25px;"></view>
				<icon-list @select="select" :list="listIcon"></icon-list>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import uniIcons from '@/components/uni-icon'
	import utils from '@/static/js/utils.js'
	export default {
		name: "nav-bar",
		data() {
			return {
				showable: false,
				listIcon: [{
					selectedIcon: "weixin",
					icon: "weixin",
					text: "微信",
					selectedColor: "#55ff55",
					color: "#55ff55",
					isSelected: false,
					id: "weixin"
				}, {
					selectedIcon: "pyq",
					icon: "pyq",
					text: "朋友圈",
					selectedColor: "#55ff55",
					color: "#55ff55",
					isSelected: false,
					id: "pyq"
				}, {
					selectedIcon: "qq",
					icon: "qq",
					text: "QQ",
					selectedColor: "#55ff55",
					color: "#55ff55",
					isSelected: false,
					id: "qq"
				}]
			};
		},
		computed:{
			isMini(){
				return utils.system.isMini()
			}
		},
		props: {
			title: {
				default: "",
				type: String
			}
		},
		methods: {
			select(id) {
				if (id === "weixin") {
					// 使用系统分享发送分享消息 
					plus.share.sendWithSystem({
						type: 'text',
						content: '分享内容',
						href: 'http://www.dcloud.io/'
					}, function() {
						console.log('分享成功');
					}, function(e) {
						console.log('分享失败');
					})

				}
			},
			search() {
				uni.navigateTo({
					url: "/pages/explore/explore"
				})
			},
			open() {},
			close() {
				this.showable = false
			},
			left() {
				uni.navigateBack()
			},
			home() {
				this.showable = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		width: 100%;
	}

	.nav-bar-fixed {
		// border-bottom: 1px solid #f0f0f0;
	}


	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 1;
		border: 1px solid $u-border-color;
	}

	.nav-bar-panel {
		height: 200px;
		display: flex;
		flex-direction: column;
	}
</style>
